<!DOCTYPE html>
<html lang="en">

<head>
	<title>The Three Tree</title>
	<meta charset="utf-8">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap" rel="stylesheet">

	<script type="importmap">
	  {
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.min.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/"
		}
	  }
	</script>

	<style>
		body {
			overflow: hidden;
			margin: 0;
			font-family: Bahnschrift, Cordana, Calibri, sans-serif;
		}

		.holder {
			position: absolute;
			z-index: 1;
			text-align: center;
			margin: 0;
			width: 100%;
		}
		
		.header {
			display: inline-block;
			text-align: center;
			background-color: rgb(255,250,255,75%);
			backdrop-filter: blur(0.1em);
			border: dotted 1px lightgray;
			border-top: none;
			border-radius: 0 0 2em 2em;
			padding: 0 2em;
		}
		
		.header:hover {
			background-color: rgb(200,200,200,75%);
		}
		
		a {
			text-decoration: none; 
		}
		
		h1, h2 {
			text-transform: uppercase;
			margin: 0.25em auto 0 auto;
		}
		
		h1 {
			font-size: 150%;
			color: Black;
		}
		
		h2 {
			font-size: 100%;
			color: SteelBlue;
			margin: 0 auto 0.1em auto;
			font-weight: normal;
		}

		.labelCore {
			text-align: center;
			font-family: Bahnschrift, Cordana, Calibri, sans-serif;

			width: 6em;
			height: 6em;
			background: white;
			border-radius: 6em;
			
			display: grid;
			align-items: center;
		}
		.bigLabelCore {
			text-align: left;
			color: black;
			font-family: Bahnschrift, Cordana, Calibri, sans-serif;
			font-weight: bold;
			font-size: 4em;
		
			width: 6em;
			height: 1em;
		}

		.labelAddon {
			text-align: center;
			color: steelblue;
			font-family: Bahnschrift, Cordana, Calibri, sans-serif;

			width: 6em;
			height: 6em;
			background: white;
			border-radius: 6em;
			
			display: grid;
			align-items: center;
		}

		.bigLabelAddon {
			text-align: left;
			color: steelblue;
			font-family: Bahnschrift, Cordana, Calibri, sans-serif;
			font-weight: bold;
			font-size: 4em;

			width: 6em;
			height: 1em;
		}

		.zone {
			text-align: left;
			color: white;
			height: auto;
			width: auto;
			padding: 0em 0.5em;
			border-radius: 2em;
			font-family: Bahnschrift, Cordana, Calibri, sans-serif;
			background: none;
		}

		.labelCore.zone {
		}
		
		.labelAddon.zone {
		}
				
		.labelCore.noDocs {
			background-image: radial-gradient(white 64%, crimson 65%);
			/*border: solid 0.25em crimson;*/
		}
		
		.labelAddon.noDocs {
			background-image: radial-gradient(white 64%, deeppink 65%);
			/*border: solid 0.25em deeppink;*/
		}
		
		.selected {
			box-shadow: 0 0 3em 2em gold;
		}
		
		.subline {
			font-size: 60%;
			font-weight: 100;
			color: gray;
		}
		
		
	</style>

	<script src="thethreetree.js" type="module"></script>
</head>

<body>
	<div class="holder">
	<a class="header" href="https://github.com/boytchev/TheThreeTree">
		<h1>The Tree of Three.js</h1>	
		<h2>and its addons</h2>	
		<div class="subline" id="info">0.171.0</div>
	</a>
	</div>
</body>
</html>